<template>
  <div class="blog-admin-container">
    <el-card>
      <div class="blog-admin-container-title">友链管理</div>

      <div class="operation-container">
        <div>
          <el-button type="primary" size="small" icon="el-icon-plus" @click="addLink">新增</el-button>
        </div>
        <div class="search-container">
          <el-input
            v-model="search"
            prefix-icon="el-icon-search"
            size="small"
            placeholder="搜索友链名称"
            clearable
            @clear="clearSearch"
          />
          <el-button
            type="primary"
            size="small"
            :disabled="search.length===0"
            icon="el-icon-search"
            @click="getSearchCurrentData"
          >搜索
          </el-button>
        </div>
      </div>

      <div class="link-content-container">
        <el-row :gutter="10">
          <el-col v-for="link in linkData" :key="link.id" :lg="6" :xl="6">
            <el-card class="link-card">
              <div class="link-operation">
                <div class="link-update">
                  <el-tooltip class="item" effect="dark" content="修改" placement="top">
                    <i class="fas fa-ellipsis-h" @click="updateLink(link)" /></el-tooltip>
                </div> <!--修改-->
                <div class="link-del">
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <i class="fas fa-times-circle" @click="deleteLink(link)" /></el-tooltip>
                </div> <!--删除-->
              </div>
              <div class="link-container-item">
                <div class="link-image">
                  <a :href="link.link_url" target="_blank">
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="link.link_image_url"
                      fit="cover"
                    />
                  </a>
                </div>
                <a :href="link.link_url" target="_blank">
                  <div class="link-info">
                    <div class="link-name">{{ link.link_name }}</div>
                    <div class="link-desc">{{ link.desc }}</div>
                  </div>
                </a>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div class="link-paging-container">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageData.pageSize"
          :page-sizes="pageSizes"
          :total="pageData.total"
          background
          @size-change="handleCurrentSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog
      :title="linkDialog.dialogName"
      :visible.sync="linkDialog.dialogVisible"
      width="30%"
      @close="reductionDialog"
    >
      <div class="link-dialog">
        <div>
          <span>友链名称</span>
          <el-input v-model="linkDialog.dialogLink.link_name" clearable />
        </div>
        <div>
          <span>友链头像</span>
          <el-input v-model="linkDialog.dialogLink.link_image_url" clearable />
        </div>
        <div>
          <span>友链链接</span>
          <el-input v-model="linkDialog.dialogLink.link_url" clearable />
        </div>
        <div>
          <span>座右铭</span>
          <el-input v-model="linkDialog.dialogLink.desc" clearable />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reductionDialog">取 消</el-button>
        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="deleteDialog.DeletionVisible"
      width="20%"
      center
      @close="cancelDeleteLink"
    >
      <h2 style="text-align: center">确定要删除 {{ deleteDialog.deleteLinkName }}?</h2>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelDeleteLink">取 消</el-button>
        <el-button type="danger" @click="exactlyDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PagerMixin from '@/components/mixins/PagerMixin'
import { getLinks, deleteLinks, createLinks, updateLinks } from '@/api/links'
import { Message } from 'element-ui'

export default {
  name: 'Link',
  mixins: [PagerMixin],
  data() {
    return {
      pageSizes: [8, 16],
      linkDialog: {
        dialogVisible: false,
        dialogName: '',
        dialogType: '',
        dialogLink: {
          id: '',
          link_name: '',
          link_image_url: '',
          link_url: '',
          desc: ''
        }
      },
      linkData: [],
      deleteDialog: {
        DeletionVisible: false,
        deleteId: '',
        deleteLinkName: ''
      }
    }
  },
  created() {
    this.pageData.pageSize = this.pageSizes[0]
    this.getCurrentData()
  },
  methods: {
    getCurrentData() {
      const params = this.getPageParams()
      getLinks(params).then(resp => {
        this.getPageConfig(resp)
        this.linkData = resp.data.result
      })
    },
    addLink() {
      this.linkDialog.dialogType = 'add'
      this.linkDialog.dialogName = '添加友链'
      this.linkDialog.dialogVisible = true
    },
    deleteLink(link) {
      this.deleteDialog.deleteId = link.id
      this.deleteDialog.deleteLinkName = link.link_name
      this.deleteDialog.DeletionVisible = true
    },
    cancelDeleteLink() {
      this.deleteDialog.deleteId = ''
      this.deleteDialog.deleteLinkName = ''
      this.deleteDialog.DeletionVisible = false
    },
    exactlyDelete() {
      deleteLinks({ id: this.deleteDialog.deleteId }).then(resp => {
        Message({
          message: '删除成功',
          type: 'success',
          duration: 5 * 1000
        })
        this.cancelDeleteLink()
        this.getCurrentData()
      })
    },
    updateLink(link) {
      this.linkDialog.dialogType = 'update'
      this.linkDialog.dialogName = '修改友链'
      this.linkDialog.dialogLink.id = link.id
      this.linkDialog.dialogLink.link_name = link.link_name
      this.linkDialog.dialogLink.link_image_url = link.link_image_url
      this.linkDialog.dialogLink.link_url = link.link_url
      this.linkDialog.dialogLink.desc = link.desc
      this.linkDialog.dialogVisible = true
    },
    reductionDialog() {
      this.linkDialog.dialogType = ''
      this.linkDialog.dialogName = ''
      this.linkDialog.dialogLink.id = ''
      this.linkDialog.dialogLink.link_name = ''
      this.linkDialog.dialogLink.link_image_url = ''
      this.linkDialog.dialogLink.link_url = ''
      this.linkDialog.dialogLink.desc = ''
      this.linkDialog.dialogVisible = false
    },
    dialogConfirm() {
      const this_ = this
      const params = { link_name: this.linkDialog.dialogLink.link_name,
        link_image_url: this.linkDialog.dialogLink.link_image_url,
        link_url: this.linkDialog.dialogLink.link_url,
        desc: this.linkDialog.dialogLink.desc }
      if (this.linkDialog.dialogType === 'add') {
        createLinks(params).then(resp => {
          Message({
            message: '添加成功',
            type: 'success',
            duration: 5 * 1000
          })
          this_.getCurrentData()
        })
      } else {
        params.id = this.linkDialog.dialogLink.id
        updateLinks(params).then(resp => {
          Message({
            message: '修改成功',
            type: 'success',
            duration: 5 * 1000
          })
          this_.getCurrentData()
        })
      }
      this_.reductionDialog()
    }
  }
}
</script>

<style scoped>

</style>

<style lang="less">

  .operation-container {
    display: flex;
    justify-content: space-between;

    .search-container {
      display: flex;

      & div:first-child {
        margin-right: 20px;
      }

    }
  }

  .link-content-container {
    margin-bottom: 25px;

    .link-card {
      position: relative;
      margin-top: 25px;

      .el-card__body {
        padding: 10px;
      }

      .link-operation {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 999;
        display: flex;

        & > div {
          color: #000000;
          margin: 0 5px;
          transition: all .3s;
        }

        & > div:hover {
          transform: scale(1.3);
        }

      }

    }

    .link-container-item {
      max-height: 104px;
      display: flex;
      align-items: center;

      .link-image {
        overflow: hidden;
        border-radius: 10px;
      }

      .link-info {
        margin-left: 40px;
        line-height: 2;
        max-width: 150px;

        .link-name {
          font-weight: 700;
          font-size: 1.5rem;
        }

        .link-desc {
          font-size: 0.8rem;
          overflow: hidden;
          text-overflow: ellipsis;
          /* 弹性伸缩盒子模型显示 */
          display: -webkit-box;
          /* 限制在一个块元素显示的文本的行数 */
          -webkit-line-clamp: 2;
          /* 设置或检索伸缩盒对象的子元素的排列方式 */
          -webkit-box-orient: vertical;
        }

      }
    }
  }

  .link-paging-container {
    float: right;
    margin-bottom: 25px;
  }

  .link-dialog {
    & > div {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
    }

    & > div > span {
      width: 60px;
      margin-right: 10px;
    }

    & > div > .el-input {
      width: 80%;
    }
  }

  @media screen and (min-width: 1920px) {
    .link-image {
      margin-left: 50px;
      margin-right: 30px;
    }
  }

</style>
